Copyright: Copyright © 2002 Step Ahead Software.


Welcome to AnFX
AnFX

Copyright © 1996,2002 Step Ahead Software. All rights reserved.

AnFX (pronounced: anne-eff-ecks) stands for "Animation and Effects" and that's exactly what it is!

AnFX is a full featured, yet easy to learn interactive animation tool: It is powerful enough for the most demanding web master yet simple enough for a home user to create impressive interactive content for their home page.

AnFX is an exciting, revolutionary, easy to learn tool that lets anyone harness the power of Flash™ or Java™ to produce eye catching web animations (shapes, images, text, audio) with no need to understand complex Flash development tools or Java programming. Your interactive designs are created using an easy to learn visual studio so that you don't have to type in a set of scripts or parameters.

You export your animations in either Flash (.swf) format for playing in the Flash plug in or AnFX Player (.afx) format for playing in the compact AnFX applet. Each format has its own strengths and weaknesses so AnFX lets you choose a deployment strategy on a project by project or customer by customer basis. You can even change your mind half way through a project as the .swf and .afx can be exported at any time from your AnFX design.

What Features are available in each format?

Due to the different technology used to play each format and the continuing refinement of the AnFX exporters not all of the features available in one format may be available in the other at this time. As we regularly refine the exporters the list of features and the formats that they work on are kept up to date on our feature map webpage: featureMap.htm. This page provides a quick reference to enable you to see what features are available when you export to a particular format.

•	What is AnFX made up of?

•	AnFX features.

•	First time users of should familiarise themselves with the AnFX interface and the concepts involved.

•	For more information on AnFX, news and purchasing details click here.


Components of AnFX
AnFX is made up of two components:

•	The AnFX Visual Design Studio where you build your designs and export them to either .swf or .afx format.

•	The tiny AnFX player which plays your .afx designs on the web (if you choose to export to .afx)

AnFX Studio

Designing with AnFX is easy and intuitive. The AnFX Studio is a windows based point-and-click designer which uses the analogy of a "movie production". Each component in the AnFX studio has been assigned a "movie" like name. An AnFX  production has scenes, a stage, actors and scripts (actions performed by the actors).

Getting started with the AnFX studio

The AnFX Applet Player

Note: The AnFX Applet player is only required if you choose to export your designs to AnFX Applet player format (.afx)

Your web site visitors will experience faster download times and silky smooth animation because these effects are produced using our advanced, highly optimized Java™ applet making it unnecessary for users to wait for large files to download over the internet when providing high impact animations.

Using the AnFX Player


Why AnFX?

AnFX allows you to create actors that can be manipulated by various actions and triggered by events such as a mouse click, mouse enter, mouse exit etc.

Using combinations of actors and actions it is possible to create a limitless variety of effects played on your site using the compact AnFX player applet. You can even simulate many of the effects provided by single purpose applets such as scrolling text, marques, fading images etc., avoiding the need to have multiple applets on your site: with AnFX you can do it all - with just ONE highly productive and easy to use tool!

We provide the technology, you provide the imagination and together the results are amazing!

Actors

The set of actors available are:

•	Single line text

•	Multi line text

•	Shapes: rectangles, rounded rectangles, ellipses, arcs, pies

•	Images: single or cycliing (animated)

•	Audio

•	NEW! Text Banner Wizard - helps in the creation and modification of sophisticated text effects.

Events

You can set up your actors to perform a set of actions when an event is triggered. These events include moving the mouse over an actor, pressing the mouse down on an actor, releasing the mouse over an actor and moving the mouse away from an actor. This allows you to make truly interactive animations.

Actions

A whole array of actions are available.

•	Move actors along paths specified graphically with your mouse

•	Grow or shrink actors as specified graphically with your mouse

•	Vary the intensity of actors from 0 to 100% (including images)

•	Phase actors to different colors.

•	Change actor's jitter and shadow settings.

•	Resize multi-line text actors.

•	Change contents/font style of text actors.

•	Change the image filename for image actors.

•	Halt and restart image cycler animation.

•	Reset actor to their original settings.

•	Play, loop, stop audio (.au) files

Profiles

With profiles, you can specify the rate at which certain actions occur. For example you can specify that an actor starts moving towards a waypoint very quickly and gradually slows down as it approaches it - or visa versa. In other words you can have motion, phasing etc., that models real life changes providing a much more realistic experience for your viewers.

Profile types include a variety of mathematical waveforms, which are represented visually to make them easier to understand. Pick the waveform that you want, and you can have non-linear movement, phasing, coloring, shadowing, jittering etc., in seconds.

Variable Tags

Variable tags provide powerful ways of setting the contents of text actors. You can specify that a text actor takes its contents from an applet parameter or from the scene name.

•	What is AnFX made up of?


The Production

An AnFX animation is called a production (named after a movie production). A production consists of a sequence of scenes. The production is stored in the AnFX design file (.afd) which is created and then edited using the AnFX design studio. When you save a design in the design studio the design file (.afd) is updated and a player file (.afx) is created or updated. When the AnFX player applet plays your animation in a browser it loads the .afx file and plays the animation contained within it.

You can set up production properties via Edit | Production Properties...

Why two files: Design file and Player file?

A separate player file (.afx) and design file (.afd) are used to enable the design studio to store extra design information in your design files that is not needed by the player. Because the player doesn't need all of the design information (in the .afd) the player files (.afx) can be made smaller by stripping out this extra design information. Due to their smaller size they willl download a lot faster from your web server.

•	Choose File|New to create a new AnFX production. All the objects you add from that point on will be contained within the new production.

Click here to learn about scenes.


Scenes

Just like in a movie production, an AnFX production has several scenes. Scenes help break a large production into smaller managable chunks.

Each scene in AnFX has a title, frame display rate, duration and background colour. By default scenes play one after the other but you can change the flow of the animation with scene links.

•	The Scene Manager window shows the list of scene in the production. Here you can create, edit, delete or change the order of  the scenes in the production.

Click here to learn about actors.


Actors

Actors are the elements that make up a scene.  Actors in AnFX can be boxes, text, ellipses, lines, images, even sounds. Actors can be configured perform actions when an event occurs.

•	Actors in AnFX are displayed and manipulated in the stage window.

Users can assign names to each actor to make them easier to manage.

Click here to learn about events.


Events

Actors can be configured to respond to events that occur. This is acheived by creating for that actor, a series of actions that are associated with a particular event.

Actors can respond to the following events:

Start of Scene	This event is triggered when the scene starts.

Mouse Clicked	Mouse button is clicked.

Mouse Down	Mouse button is pressed.

Mouse Up	Mouse button is released.

Mouse Enter	Mouse moves over an actor.

Mouse Exit	Mouse moves away from an actor.

The Start of Scene event occurs automatically at the start of every scene. All other events depend on user interactivity.

Click here to learn about actions.


Actions

Actions in AnFX are instructions to the actors to do something - move, change color, change intensity, go to a scene, play a sound etc. Actors can have a different set of actions for each event and perform those actions when that event, such as a mouse click, is triggered on them.

An actor can even have an action that operates on a different actor. This makes it possible to do great interactive animations with good feedback to the user.

•	Actions are layed out in the sequencer where they are represented by icons.

•	Path (or waypoint) actions are instructions to move and/or resize. They also appear as waypoints in the stage window

To create an action

To create and action:

1. Click on the actor that you want to trigger to action

2. Press the "New Action..." button and choose an appropriate action.

3. The triggering dialog appears allowing you to specify how the action will be triggered and specify which actor the action will affect - it doesn't always have to be the actor that triggered the action in the first place. For example a mouse click event on a text actor could invoke the Audio Play action on and audio actor.

Note: You don't have to specify the target actor yet but you will not be able to save your design until you do.

These all the terms you need to know to begin learning AnFX. To start designing animations now see:

•	Getting Started

If you want to learn about groups see Groups.


Groups

To make it easy to develop sophisticated effects AnFX allows the grouping of two or more associated actors into a single group. This group can then be managed as if it were a single actor. Manipulating a single group is much easier than manipulating multiple individual actors.

For example: Let's say we created a picture of a head with a large circle for the face and a couple of circles for the eyes, one for the nose and a rectangle for the mouth. If we then wanted to place the newly created head in a different position on the stage we would have to either move each component individually or select all the actors by dragging a selection rectangle around them and dragging the selection. A better approach is to group them and then the group can be dragged as a single entity now or in the future.

Grouping Actors

To group a set of actors together first select the actors to be grouped and then select Arrange | Group from the main menu.

Once grouped you can move the group around or apply actions to the group as a whole. See below for how actions apply to groups. Properties of the individual actors making up the group are not accessible from the group. To change properties in the actors making up the group you must ungroup the actors, change any properties and then regroup the actors.

Ungrouping Actors

To break a apart a group (ie., ungroup) right click on the group and choose Ungroup. Any actions that apply to the group will be lost and the group will no longer exist - its component actors will remain as individual actors.

Actions and Groups

The following actions can be applied to groups.

•	Path - allows you to move a group and all the actors belonging to the group (a path action will only change a group's position, it will not change the size of the group or size the actors belonging to the group)

•	Reset (applies a reset to the group and all of its child actors)

•	Goto Scene

•	Goto URL

See Layers.


Layers

Scenes are made up of layers. Layers contain Actors and Groups. Layers can be unique to a specific scene or shared among different scenes. Layering is a powerful, time saving feature.

Types of Layers

Currently AnFX supports three layers: common background, main and common foreground. As the names suggest background and foreground are common to all scenes that have them enabled (you can specify whether or not common scenes are visible in an individual scenes in the Scene Properties form). While the background and foreground layers can be  shared among all scenes each scene has its own unique layer called the "main" layer.

How layers are displayed

When animating AnFX paints the the actors in the background layer first, then the actors in the main layer and then actors in the foreground layer.

If you want an actor to appear in the background of more than one scene then place it in the background layer. If you want an actor to appear in the foreground of more than one scene then place it in the foreground layer. Actors that are unique to a particular scene are placed in the main layer of that scene.

Ordering of Actors in Layers

Within each layer actors are painted in a specific order. The bottom most actor is painted first, the top most painted last. A higher actor will obsure all or parts of an actor below it.

You can change the ordering of actors by right clicking on the actor and choosing Ordering and then selecting your desired ordering operation or by selecting an actor and using the "Arrange" menu. Changing the order of actors only changes their order within the layer that contains them. This means that any actor in a foreground layer will always appear over the top of actors in the main layer.

Ordering operations available are:

•	"Bring to front" makes the actor the top most actor (ie., it's sheet of plastic is lying on the top of the pile).

•	"Bring up one level" moves the actor up one position so that it is then above the actor that is currently just above it.

•	"Send to back" makes the actor the bottom most actor (ie., it's sheet of plastic is lying on the bottom of the pile).

•	"Send down one level" moves the actor down one position so that it is then below the actor that is currently just below it.

More on painting actors

To help understand this concept imagine that each actor in the AnFX stage window is actually painted onto a sheet of clear plastic and that all of these sheets are laid on top of each other to form the scene.

Viewers of your AnFX designs just see the total effect with objects on the top sheets obscuring the view of objects on lower sheets.

Changing ordering of actors is like changing the order of these sheets.

Enabling/Disabling Layers and Actors

To declutter your stage window during design you may like to right click in the stage window and choose: "Select Hide/Show Actors...".  The form that appears allows you to hide individual actors or layers. This does not affect how the animation is viewed in the browser - it only affects how the stage displays your scene - allowing you to "turn off" layers or actors that have been completed and are better of hidden to make designing the remaining actors or scenes easier.

Creation of Layers

In the current release of AnFX the main layer is automatically created when a new scene is created. In a future release users will be able to create extra layers inside the main layer.

See also Common foreground and background layers


Adding an Actor

As with most movie productions you need one or more actors in your scene. Let's add an actor to the current scene:

•	Click on an actor button to add an actor to the scene.

•	Normally the actor will be placed immediately in the stage window unless you have turned on additional layers. You can use additional layers to assist in the production of slide presentation type animations. You can read more about that later if you want in Common foreground and background layers but for now let's keep it simple...

The text actor will be placed in a default position in the stage window.

•	Click on the actor to select it's icon - this is called the start point icon (denoted by an asterisk * in the top left corner). The start point icon determines where the actor is located and how big it is at the start of a scene.

•	Right-click on the start point to modify the properties of the actor.

•	Move the start point by dragging with the mouse.

•	Resize the start point by dragging the size boxes on the corners.

Now you are ready to add a waypoint.


Working with Waypoints

•	Right click on the start point and select Add Waypoint.

A waypoint icon will appear in the stage window and a waypoint action (gray rectangular box with an arrow at each end) will appear in the sequencer window.

Adjusting end position and end size

•	Move the waypoint to the desired position and size in the stage window by dragging it or dragging the sizing boxes in the corner.

Adjusting the start time and duration of the waypoint action.

•	You can drag the waypoint action in the sequencer window to change the time at which the action starts. Adjust the duration by dragging the arrows at the left or right ends of the action icon.

Adding another waypoint

•	You can click on the new waypoint and add another waypoint. You can add as many waypoints as you like in this manner. When playing the design the actor will move from its start point to the first waypoint and then the second and so on until it reaches its final waypoint.

•	To make an actor wait still between waypoints create a time gap between the waypoint actions in the sequencer window.

Now it's time to play the animation.


Playing Your Animation in the AnFX Studio
Playing Animations in the Studio

The simulator simulates most of the visual aspects of your animation so that you can quickly test your designs without having to switch back and forth to a brower to see your design working.

•	Use the VCR like buttons in the AnFX toolbar to playback your animation in the AnFX studio simulator.

 Rewind to start

 Rewind (1 sec)

 Play

 Stop

 Fast forward (1 sec)

 Fast forward to end.

Note: While the simulator simulates most of the visual aspects of your design there are some things that must be tested in a browser. To view a list of simulator limitations see Simulator Limitations.

•	To test your design in a browser see Testing Your Designs Locally.

Now you are ready to add an action. Click Adding actions.


Adding Actions

•	To add an action click the New Action button in the sequencer or right-click in the sequencer at the desired point in time. See Using the Sequencer.

•	The Action Triggering dialog will appear in which you can set up how the action is triggered.

To test your design in a browser see Testing Your Designs Locally.

Learn more about Creating Animations.


The Main Window

The AnFX Production Studio has three windows:

•	The stage window is where you lay out the objects in your animation

•	The sequencer is where you set up the elements that animate those objects.

•	The scene manager which helps you manage the structure of your animation.

Click here to learn about the basic concepts of an AnFX animation.


The Stage Window

The stage windows dislays what will be displayed when your design is playing in a browser - the visible area is bordered by an adjustable, gray rectangular frame.

•	Click on the frame and drag to resize the stage - this will change the size of the animation in the browser.

•	Actors do not have to be on the stage all of the time, they can be placed on or off the stage at design time. Actions can be set up so that they enter, exit or move around on the stage while the animation is playing.


The Scene Manager

The scene manager is used to manage the scenes in a production.

•	Use the new and delete buttons to add and remove scenes.

•	Click edit to modify a scene's properties. See Scene Properties Form.

•	To change the order of scenes, click on a scene and drag it to the desired position.


The Sequencer

The sequencer shows the current actor, the name of the selected event and the actions that will be performed when the selected event is triggered.

Important: Only actions for the selected event are shown. At times you may think that you have "lost" your paths and other actions. Usually this is caused by selected event changing to a different event. Use the combo box to change the selected event back to "Start of scene", for example, and all of the paths and other actions belonging to the current actor that were configured to commence at the start of the scene will become visible. To show all the actions for all events at once would result in a very cluttered display so AnFX uses this cleaner method of displaying actions.

Click on the area below to see a description of the area.

The combo box has "Start of Scene" event selected. The actions shown are those that will occur at the start of scene. You can read the above sequencer picture like this:

•	At the start of scene text  will start to move towards waypoint #1.

•	At time 1 second: the intensity of text  will start to change gradually from 100% to 73% and it will reach intensity 73% at time 2 seconds.

•	At time 2 seconds the audio actor [image] will start to play.

•	At time 1 second: text  will start to change color to blue and will be completely blue just before 6 seconds has elapsed.


The Stage Manager

The stage manager displays actors and layers in a tree like structure.

Click on the actor that you want selected in the stage window.

Use the Hide/Show and Hide All/Show All buttons to hide or show certain actors or layers in the stage window. Hidden actors are only hidden in the studio - they will still be visible when the design is played. Hiding actors can make designing easier by removing actors that do not need editing.


Scene Properties Form
Setting up Scenes

•	Select the scene in the Scene Manager and press edit.

•	This will display the scene configuration form where you can setup the options below:

Scene Name

Specify a name for the scene by which it is identified in the Scene Manager window.

Frame Interval

The interval in milliseconds between the painting of each frame. Specifing a larger interval results in less updates and hence less smooth animation. A small frame interval gives smoother animation but is more CPU intensive.

Background Color

Selecting this will display a color selection box from which you may select a background color for the scene.

Include Foreground and Background Layers

These check boxes allow you to specify which common layers to include in a scene. By default new scenes will include both foreground and background layers. See Common foreground and background layers.

•	Select a duration for the scene:

Infinite Duration

Selecting this option will cause the scene to play for a infinite length of time. This is suitable for menus and scenes with links.

Limited Duration

The scene will play for the specified number of milliseconds. This typically for animation scenes which are not dependent on user interactivity.

If you select this option you must decide what you want the production to do at the end of the scene:

Keep Repeating

The scene will play for the specifed time and repeat infinitely.

Play n times

The scene will play n times at the specfied length (default: 1 time). If you select this option you may configure the options below:

Transitions

See Transitions

End of scene link

You can specify a Scene Link or a URL Link  to go to at the end of a Scene. To modify a link click the 'Edit' button and click 'Clear' to remove it.


Production Properties Form

This form allows you to set up properties that affect the whole production. After making changes to the production properties hit OK and the clipboard will contain the updated HTML code containing the <APPLET> tag needed to invoke your animation. You should paste this HTML code from the clipboard into your HTML editor at the desired location in the web page.

Player Properties

Production Play Count

Indicates how many times this production will play. A value of 0 means play forever. This parameter has no effect if the production contains a scene that has an unlimited duration or a scene that repeats forever.

Quick Start

Check this box to start animating as soon as the images and sounds for scene 1 are loaded. Images and sounds for other scenes will be loaded in the background while the animation is playing. This starts the animation earlier than if the box is not checked. Be aware that a if another scene is displayed and one or more of its resources are not yet loaded then those resources will not be available until loaded. They will appear on the scene only after they have been loaded.

Default Location of Media Files

These indicate where the AnFX studio will store media files used in your production. Blank entries indicate that media files will be stored in the same directory as your HTML and production files. You can specify a directory such as images for storing images but you must then store images in an images subdirectory on your web server. Beginners should leave these blank. These directories are relative to the directory in which the production is saved.

Free Web Servers and AnFX

Many free web servers do not understand the .afx extension of the AnFX content files used by the player when playing your production. Check this box to make AnFX store content in a file with a .cab extension instead. The file will not be a true cab but your free server will understand the .cab extension and allow you to upload it. Make sure that in your HTML file the line <param name=afxfile value=abc.afx> is changed to <param name=afxfile value=abc.cab>assuming your design was called 'abc'. Where the online help refers to a .afx file read this as a .cab file.

Production and "Loading Scene" colors

This sets the default background color for new scenes. The production background color is also the color used by images when fading. They always fade to the production's background color - not the color of the scene that contains them. It also sets the color of the "loading scene".

The AnFX player receives these colors from the HTML applet tag parameters so if you want to change them you should update any HTML file that contains the applet. AnFX will automatically update the abc_insert.htm and abc_afx.htm files whenever a change occurs in these colors and also write the new HTML code to the clipboard for you to paste it into your HTML editor.

To change the background color of existing scenes to the specified background color: Click on "Change all existing scene to this background color".


Action Triggering

Specifies how an action will be triggered.

•	To configure action triggering, add a new action or right-click on an existing action.

•	Select the event that you want to trigger the action and the time to wait after the event has occured before performing the action. Note: when the event type is "Start of Scene" certain controls are grayed out because the trigger for a start of scene event is not assigned to any individual actor. Rather, at the start of a scene all actors receive a start of scene event.

•	Select the actor that will trigger the action when the event occurs. For example if the event is 'Mouse Clicked' the action will be performed when this actor is clicked.

•	Click properties to edit the details of the action to be performed.

•	Select the actor who the action will be performed on. This is known as the Target Actor. You may select:

a) This actor - i.e. the same actor that is triggering the event.

b) A different actor - click 'Change Target' to select

Note: Not all actions can apply to all actors. You must select an actor to which the action can apply. For instance you can't specify a Set Text action for a rectangle because rectangles do not have any text. You can leave this field unspecified and hit Ok. You will note be able to save the design until you specify it.


Selecting and Manipulating Actors and Waypoints

Special selection functions have been provided to enable you to select actors and waypoints even within complex animations.

In order to understand how to best use these functions you need to understand how an actor is related to its waypoints. The actor in a sense "owns" all of its waypoints. If the actor is deleted then all the waypoints will be deleted also. If an actor is moved or copied then all the waypoints are also moved or copied.

General Selection Rules

If no object is selected and you click in the stage window then AnFX will select the "top most" (see Layers of Actors) object that it finds at that location. If an object is selected and you click anywhere within that object, even on another object then that original object remains selected unless you hold down the ALT key.

When the ALT key is held down then each time you click the selection will change to the object below the currently selected one until it reaches the bottom most object and then it starts at the top most object again. Keep clicking until the requested object is selected. You can then drag it, size it or right click on it.

Another way to select an object that is obscured by other objects it to choose Edit|Select Actor. You will be presented with a list of actors to choose from. Note that this will select the entire actor (ie., a grey rectangular frame is drawn around the actor). In order to move the entire actor drag it by pressing the left mouse button on the gray frame and moving the mouse. To size individual waypoints or the start point you will need to click inside the frame on a waypoint or start point to select them in preference to the entire actor being selected.

Manipulating a waypoint

Normally when you click on a waypoint only that waypoint is selected. You can then choose to  position it by dragging it or size it by dragging one of the selection squares displayed in the corners.

Manipulating a whole Actor

If instead of selecting and individual waypoint you want to select the whole actor that owns this waypoint then hold down SHIFT while pressing on the waypoint. You will see a gray rectangle large enough to contain all of the waypoints. To move the entire actor press your left mouse button down on the gray border and drag it to a new position. All the waypoints will move together.

Selecting a waypoint of an actor that is "behind" another actor

To select a waypoint that is behind another waypoint hold ALT while clicking the left mouse button. The first click will select the top most waypoint, another click will select its actor (the grey rectangle appears).

The next click will select the waypoint immediately below the topmost actor under the mouse, another click will select actor owning this waypoint.

Each successive pair of clicks will select an waypoint and then actor below the current one so this function can work no matter how many actors are layered on top of each other.

Manipulating Multiple Actors

To move, copy or cut multiple actors you need to select a set of actors. The best way to select multiple actors is to hold down SHIFT and drag a rectangle around all those actors that you want selected. You can then click on the gray border of any of the actor selection rectangles to move the group of selected actors together.


Accurate Positioning of Actors and Waypoints

The cursor keys (UP, DOWN, LEFT RIGHT) can be used to accurately position actors or waypoints in the stage window.

Ensure that the stage window has the focus by clicking on its title bar or by clicking on the actor or waypoint that you want to position. You can also multiple select items and move them as a group.

Each press of a cursor key moves the selected items one pixel at a time in the appropriate direction.

Grid Options

You can also set up a grid with a "snap to" feature. Edit the grid properties by choosing View from the main menu and selecting "Grid Options..."


Transitions

Transitions are special effects take place just before and just after a scene plays. It is mainly used to either clear the screen of the just finished scene, or to bring in the next scene in a decorative manner.

Transitions can be any colour you want. You can also specify the speed of the transition, to show how long it will take.

At the moment, the same transition type is applied to both the beginning and end of a scene.

No Transition (Default)	This means that no transition will take place - the scene will start and end instantly.

Random Transition	This selection will apply a random transition to the scene. The transition will currently still be the same for both beginning and end of scene.

Wipe To Left	This transition involves the screen filling with the chosen colour from right to left.

Wipe To Right	This transition involves the screen filling with the chosen colour from left to right.

Wipe Up	This transition involves the screen filling with the chosen colour from bottom to top.

Wipe Down	This transition involves the screen filling with the chosen colour from top to bottom.

Horizontal Split	This transition will have the screen fill inwards, from both the left and right sides, meeting at the centre.

Vertical Split	This transition will have the screen fill inwards, from both the top and bottom, meeting at the centre.

Iris	This transition is a combination of both vertical and horizontal splits. The screen will fill inwards with the chosen colour from top, bottom, left and right, until it reaches the centre.

Scroll right	All actors in the scene scroll to the right.

Scroll left	All actors in the scene scroll to the left.

Scroll up	All actors in the scene scroll upwards

Scroll down	All actors in the scene scroll downwards

Note all descriptions refer to the transition effect that occurs at the END of a scene - the action will play in reverse for the beginning of a scene.


Using the AnFX Wizards
Wizards

AnFX features some handy wizards to help you get started on your designs:

•	Menu Wizard

The menu wizard is a quick and simple way of setting up an interactive menu on your website. It sets up a list of menu items which become highlighted when the mouse is over them and jump to links when clicked.

•	Banner Wizard

The banner wizard creates an eye-catching text animation using the caption you enter.

•	Text Wizard

A simple text highlighting wizard which is usefull for setting up link on you website.


HTML and AnFX: how they work together

This section describes how AnFX works with your HTML pages. We recommend that you read this now in order to understand the simple concept behind how your designs will play in a browser. This will help you when running and testing your designs on your web page and locally on your PC.

For help on publishing your designs on your web page see Installing the AnFX player on your web site

AnFX Studio and AnFX Player - What are they?

The AnFX toolkit is made up of the AnFX studio where you create your designs and the AnFX player which plays those designs within a web browser.

The studio is required for creating AnFX animation designs. These animation designs are stored in files that have a .afd extension. A separate content file with .afx extension contains instructions for the player so that it knows what text, images and shapes to use and how to move, size, and fade them etc.,).

The player is required for playing designs in a browser - it reads in an .afx file that you have created with the studio and plays it. It will also attempt to read in any image or audio files that you have included in your animation design - assuming that you have uploaded these to your web server.

The AnFX player is a powerful yet compact piece of software that reads a content file (.afx) and plays it in a browser. The AnFX player is actually a small Java applet that is automatically and transparently downloaded by the browser without any user interaction the first time a visitor to your site comes to a page containing an AnFX animation. After being downloaded the player is cached in the visitor's browser and subsequent pages with AnFX designs use the cached player that has already been downloaded. There is no need for it to download it again.

What if I don't know anything about Java?

Even though AnFX uses Java technology you do not need to understand anything about Java to use AnFX animations on your web site.

How does it all fit together?

A HTML page that contains an AnFX animation will have a special <applet...> tag inserted (don't worry about typing the applet tag by hand - the studio will help out with that. You can check out the details later in Adding the <applet> tag). The <applet> tag is the standard tag for telling a browser to display an applet and what size to display it at. The tag also tells the browser where to get the code for the applet. In a page with AnFX this tag refers to the AnFX player applet. This tag also has some parameters. The most important parameter is the name of the design file (.afx) that it should load and play.

The default set up for the AnFX applet tag in a HTML file tells the browser to expect the AnFX applet code files (also known as class files. The player comes in 3 forms to suit a variety of browsers a .cab a .jar and a set of .class files) to be located in the same directory as the HTML file that contains the tag.

[The best way to ensure that the player files are located in the right directory on your PC is to open your .afx design file in the AnFX Studio and then select File | Save As and save it to the directory where you HTML file is stored. After creating the "images" and "audio" directories to provide a place to store your images and audio files AnFX will ask if you would it like to copy the AnFX player files (the class files and .cab and .jar) to this directory if you haven't already done so. Get AnFX to perform the copy for you.]

Assuming the player files were successfully located the browser will load the player and the player will start to run. The first thing the player does when it starts is to get the name of the design file (.afx) from the "afxfile" parameter and attempt to load it and then run the animation contained within it. It also expects that this file will be in the same directory as the player files. The above File|Save As operation will have also saved your design file to the same directory as the player files.

A local example:

Let's first just look at how AnFX will work when its running locally on your PC. Let's say you have a production called default.afd and a HTML page called default_afx.htm (created by AnFX when you go File | Preview AnFX Player) stored in a directory you have called C:\MYWEB on your PC where you do your HTML design work. You have also created an animation called default.afd in C:\MYWEB.

Let's say you open default_afx.htm in the browser (for example when you do a browser preview in your HTML editor). The browser sees the <applet> tag and will expect to find the AnFX player files in the same directory as the default.htm file.

Assuming you have saved your design in this directory as specified above then the browser will find the AnFX player files in C:\MYWEB and proceed to load the AnFX player applet. Once loaded the applet will examine the value of the tag parameter named "afxfile". The value of this parameter contains the name of the default.afx design file to be loaded and played.

It assumes that the specified .afx file is also located in the same directory C:\MYWEB. This should be the case if you have saved your default.afx file into C:\MYWEB.

A web site example

Let's look at how AnFX will work when its running from your web site. Let's say you have a directory called htdocs on your web server that you upload your HTML files to. Let's say you have a file called default.htm stored in htdocs. You have also created an animation called default.afx. Let's say you have created an images and an audio directory on your web server to store you image and audio files. These will be htdocs/images and htdocs/audio.

You need to upload the player first (you only need to do this once). See Installing the AnFX player on your web server

You then need to:

•	upload default.htm and default.afx to htdocs

•	upload any image files to htdocs/images

•	upload any audio files to htdocs/audio

See also Production Properties Form


Adding the <applet> tag to your HTML page

You should read HTML and AnFX before reading this topic to get understand the basic concepts of using of the AnFX player.

When do I need to do this?

You only need to perform this step whenever you want to add an animation to a HTML page or if you change attributes such as size or loading background or foreground color of an animation within the page.

What code is to be inserted?

The <applet> tag code is a few lines of HTML code. It tells the browser to load and run the applet with any parameters that you specify including the desired width and height.

To help you the AnFX studio generates a small file containing these lines for each design project when you press the

tool bar button. It also places the applet tag HTML code in the clipboard so that it can be easily pasted into your favourite HTML editor.

The contents of this small file is to be inserted in the html file where you want the applet to appear. It is named xxx_insert.htm where xxx is the name of your design file (.afx). If your HTML editor allows pasting text from the clipboard then you can simply position your cursor where you want the animation to appear and choose Insert | HTML Markup.. (as in FrontPage HTML editor) and hold down Shift while you press the Insert key which will perform a paste operation.

Most HTML editing programs will allow you to insert raw HTML within your HTML page from a specified file. If your HTML editor does not let you insert from a file then open the xxx_insert.htm file with Notepad and copy and paste the contents to your HTML page at the desired location.

Upload your HTML file.

How do I insert the <applet> tag code?

The method of inserting the <applet> tag is different for each HTML editor but usually there is an option to either edit the HTML directly or insert a text file containing the HTML code that you want inserted. See Front Page, Net Objects Fusion, Dreamweaver for more details.


FrontPage, Net Objects Fusion, Dreamweaver and AnFX
HTML Editors - Inserting an AnFX animation into a page

When using HTML editors there is usually a method of inserting HTML code into a page that you are editing.

Often this provides an edit control into which you can paste HTML code.

First get the <applet> tag code into the clipboard by choosing File | Generate HTML

In your HTML editor go to the option that allows you to insert raw HTML.

[Under Front Page go: Insert|HTML Markup... ]

Paste the <applet> tag parameter into the edit control (hold SHIFT while pressing the Insert key to do this OR use CTRL-V) and press OK.

When you save and preview your page you should see your animation.

If you do not see the animation it probably means that you have not yet saved your .afx file to the same directory that your .htm file is located and the browser can not find the player file and/or the .afx file. See HTML and AnFX for more details.


Testing Your Designs In AnFX Test pages

AnFX generates a HTML test page (yourdesign_swf.htm or yourdesign_afx.htm depending on which preview button you pressed) for each of your AnFX designs. This includes the <APPLET> tag (Java) or <OBJECT> tag (Flash) with the information to tell the browser to display your design in that page. The test files make it easy to test your designs without needing to create your own HTML files to test them. When you are ready to add your designs to your own HTML files see Placing AnFX into an existing HTML page.

Running Locally - what does that mean?

AnFX can run locally or over the internet from your web site. "Locally" means that your designs and the player are stored on your PC not your web server. Testing locally is a great way to perfect your AnFX animations prior to showing off your skills to the world by publishing them on your web site. To read about publishing your designs on your web server see Installing the player on your web server.

How do I run my designs locally?

If you have created a design and saved it then the following two methods will allow you to see your design running in the test page in a browser.

There are two ways that you can test your designs locally on your PC.

•	Press one of the test buttons:  or [image]  on the AnFX toolbar. This will start your web browser, and load your design. (You may be prompted to install the player in the current directory if it is not already installed there if you pressed the .afx button)


Placing AnFX into an existing HTML page
Placing AnFX in an existing HTML page

The best strategy for adding AnFX to your existing HTML pages is to create the AnFX designs in the same directory that your HTML files are stored. In this way it will not be necessary to copy supporting files such as the AnFX content (.afx), AnFX player, image and audio files over to your HTML directory.

We assume that you have created the design in the same directory as your HTML file or you have copied the necessary files across to that directory. (See Installing the AnFX player on your web server and Publishing Your Designs on the Web for a list of files required to be copied to the directory containing your HTML file if it is not in the directory in which you created your design.)

Press the a preview button, either [image] or [image] to generate the appropriate HTML files for you chosen export format.

For .afx export:

Copy the APPLET tag into the clipboard. Now go to your HTML editor, (eg., Front Page) and open up the HTML page that you wish to contain your design. Move the cursor to the desired location of your AnFX design and select Edit|Paste then save your design. This will place the HTML code containing the <applet> tag into your HTML page. Assuming the necessary files are in place then opening this page in a browser should result in your AnFX design being displayed in the page.

You can set up a number of parameters for your design as shown in Setting up HTML Parameters.


Introduction
Publishing and Setting up AnFX on your Website

This section is only relevent when you choose to export your designs to the AnFX player format (.afx)

There are a couple of simple tasks to perform get your design(s) playing on your website. For each task choose the option appropriate to you:

Setting up AnFX on your web server using FrontPage

Setting up AnFX on your web server using FTP

The above step brings the power of AnFX to your web server. You need to do this only once in the beginning.

Publishing your designs using FrontPage

Publishing your designs using FTP

Once the AnFX player is setup on your web server you can then publish as many AnFX designs to your site as you like on as many pages you like using the above step.


Setting up the AnFX player on your web server using FrontPage

Make sure FrontPage Explorer is open and has your FrontPage Web opened.

Choose File|Import

Choose Add File...

Point the File browser to the directory in which you installed AnFX (eg., C:\Program Files\AnFX).

Set the file name field to *.class and press Open

Select ALL the files that appear and press Open

Set the file name field to *.jar and press Open

Select ALL the files that appear and press Open

Set the file name field to *.cab and press Open

Select ALL the files that appear and press Open

Press the OK button.

This has placed the AnFX player files in your local web webserver now you need to publish them to your real web server. You do this via the same way you currently publish your HTML files - using the publish button your webserver will have the latest AnFX player files uploaded to it.

Press the Publish button.

If you upgrade to a newer version of AnFX and the player files have changed you should repeat this process to ensure that you have the latest version of the player on your web server.

Next


Publishing Your Designs Using FrontPage
Publishing Your Designs on the Web using FrontPage

Make sure FrontPage Explorer is open and has your FrontPage Web opened.

Choose File|Import

Choose Add File...

Point the File browser to the directory in which you have created your design  (eg., C:\Program Files\AnFX).

Set the file name field to *.afx and press Open

Click on the .afx file that corresponds to the name of your design file

If your design uses images or audio files from the images or audio directories then choose Add Folder and point to the audio directory and press OK. Then point to the images directory and press OK.

If you have images or audio files in the same directory as your .afx file then you should add these individually clicking on the Add File button, selecting the any image or audio files that have changed and then pressing OK.

This has placed your AnFX production and any images or audio files that it needs in your local web webserver. Now you need to publish them to your real web server. You do this via the same way you currently publish your HTML files - using the publish button your webserver will have the latest AnFX player files uploaded to it.

Press the Publish button.

You can now try your design by pointing your browser to a page on your web site with an AnFX design inserted into it. See Inserting the AnFX applet if you have not yet inserted an AnFX design into one of your pages.


Setting up the AnFX player on your web server using FTP
Installing the player on your web server using FTP

Free Technical Support is available:

If you experience any difficulties or have any questions while setting up or using AnFX please do not hesitate to send an email to:

anfxsupport@stepaheadsoftware.com and we will be glad to help.

This topic disusses how to set up the AnFX player on your web site. After installing the AnFX player on your web site you will be able to use the player to play your designs. You can then read how to publish your designs so that you can show them off to the world!

These steps only need to be done once for your web site. You do NOT need to upload the player to your webserver each time you make a design change. The player only needs to be uploaded again if Step Ahead Software makes a new release of the AnFX player that supports new features that you wish to use. Not every new release of the studio requires a new player so don't feel like you need to re-upload the player with each upgrade.

To install the AnFX player on your web site follow these simple steps:

Note: To make sure you can see all of these files in Windows Explorer - go View|Options in Windows Explorer and make sure "Show all files" is checked AND make sure "Hide file extensions for known file types" is NOT checked. The anfx4main.cab and anfx4rest.cab files are compressed files that will normally be displayed with the icon of any compression program you have installed. For example if you have WinZip installed the anfx4main.cab file will have a WinZip icon.

The applet is made available in 3 forms, each form is used by different browsers. Uploading all forms allows AnFX to work with any Java powered browser.

Use your web site upload program (CuteFTP etc., or the upload page provided by your ISP) to upload the following files:

[Upload in binary mode - the same mode used to upload gif and jpg files]

1. Upload anfx4main.cab, anfx4rest.cab  to your web server (see above if you can not find this file)

2. Upload anfx4main.jar, anfx4rest.jar to your web server

3. Upload ALL *.class files to your web server

You will find these files in the directory that you installed AnFX to.

NOTE: When uploading files be sure to upload them in BINARY mode in your FTP program and make sure that the case of all letters in the filenames are preserved. eg., the file called anfx4main.cab must be uploaded as anfx4main.cab NOT AnFX4Main.cab or ANFX4MAIN.cab or anfx4m~1.cab

Creating directories for storing images and audio files

AnFX by default will expect to find images and audio files in separate subdirectories on your web server called "images" and "audio". This is so that you don't have to clutter your main HTML directory with these files. It helps to keep everything nice and tidy by not throwing everything in the same directory. You can change this default in Production Properties - you can even make the directories blank meaning that image and audio files will be stored in the same directory as your HTML file by default.

If you have not done so already you must create an "images" directory and an "audio" directory on your web server. These should be created in the directory where you HTML files are stored. Any images or audio files that you use should be copied to the appropriate directory. Your FTP program may have a right click option called "Create directory" as does Cute FTP to allow you to do this.

Why the different player applet files?

The AnFX player is a tiny Java applet. The applet is provided in three formats to cater for the wide variety of browsers on the market. Each browser will automatically request the most appropriate format when a visitor comes to your website. It is therefore important that you download all the files in each format even though they may not all be used so that each browser has the format it requires.

The formats and the browsers that use them are:

Internet Explorer: anfx4main.cab,anfx4rest.cab

Netscapte Navigator: anfx4.main.jar,anfx4rest.jar

Other browsers and early versions of Internet Explorer and Netscape Navigator: A set of individual class files with the *.class extension.

Uploading can be performed with any FTP program like CuteFTP, or if your web server does not support FTP, a HTML form will be provided on your server's web site for uploading files.


Publishing Your Designs Using FTP
Publishing Your Designs on the Web using FTP

This section describes how to publish your designs on your web site. You must ensure that the AnFX player is installed on your web server before you can publish your designs. Read Installing the AnFX player on your web server if you have not yet installed the player on your web server.

If this is the first time that you are uploading a design then we recommend that you upload one of our simple examples. You should upload the anfxtimes.afx animation and the anfxtimes_test.htm HTML page that will contain it. If you can get this design working on your web site then you will have confidence in the following the steps to get your own more interesting animations (including images and audio) working from your web site. If you read this section very carefully you should have no problems getting AnFX working on your site.

At this stage we assume that you have created an AnFX design using the designer (or you are using the anfxtimes example for practice) and wish to have it included in one or more of your web pages. When you saved your design a design file (.afd) and a separate player file (.afx) are created and updated. Your design file (.afd) should not be uploaded to your web server - it is not used by the player. The player can only read your player file (.afx).

These steps are easy and each one has a "When" section describing when you need to perform this step and how often. Most steps will only need to be performed once.

NOTE: When uploading files be sure to upload them in BINARY mode in your FTP program and make sure that the case of all letters in the filenames are preserved. eg., myDesign.afx gets uploaded as myDesign.afx NOT mydesign.afx or MYDESIGN.AFX

NOTE FOR USERS OF FREE WEB SERVERS: Many free web servers do not understand the .afx extension of the AnFX content files used by the player when playing your production. You should choose Edit | Production Properties and check the "Production will be deployed on a free web server" box to make AnFX store content in a file with a .cab extension instead. The file will not be a true cab but your free server will understand the .cab extension and allow you to upload it. Make sure that in your HTML file the line <param name=afxfile value=abc.afx> is changed to <param name=afxfile value=abc.cab>assuming your design was called 'abc'. Updated applet tag HTML code is placed in the clipboard after you edit the production properties after you press Ok. Where this online help refers to a .afx file you should read this as a .afx file.

Steps involved in publishing an AnFX design on your web site:

•	1. Insert the <applet> tag in your HTML file(s)

Ignore this step if you are uploading the anfxtimes example. anfxtimes_test.htm already has the applet tag inserted.

When: You only need to perform this step once per HTML page or if you change the dimensions of your AnFX design within the page or if you decide to add another AnFX design to the same page.

See Adding the <applet> tag to your HTML page for details of how to do this.

•	2. Upload the AnFX production file .afx (or .cab if you have checked free web server in Production Properties form) to the same directory as the HTML file that invokes it.

When: You need to upload your design file whenever you have finished making changes to it and tested it locally to ensure it looks right or after you have registered your copy of AnFX in order for the serial/key to take effect and remove the evaluation banner.

The .afx file produced by the AnFX design studio contains your animation. It must be uploaded to your web server. When a visitor comes to your site the browser will download the player which will in turn open the design file and play it.

This can be done with any FTP program like CuteFTP, or if your web server does not support FTP, a HTML form will be provided on your server's web site for uploading files.

•	3. Upload any image or audio files used by your design to the appropriate directory.

When: You need to upload an image or audio file whenever you add one to a design or if you change the image or audio file.

There are no images or audio files in the anfxtimes example but for other designs that you create you wll need to follow this step carefully.

The .afx file produced by AnFX contains your design and it makes references to image and audio files that you have chosen to use.

By default images and audio are stored in the same directory as your HTML files so upload them to the same directory as your HTML files.

If you have have changed the default images and audio directories in the Prodution Properties form then you will have to create directories of the same names (case sensitive) on your web server underneath your base directory and any image or audio files added to your design after that time will have to be uploaded to the appropriate directory.


Updating Your Designs on a Web Site

So you have successfully got your first design running on a web site but now you want to change it. You are wondering if there is anything special that you need to do right? Well it is a pretty simple process.

If you have changed the animation in the AnFX studio then you should make sure that you have saved the design. Use File|Save to save the design and both the design file (.afd) and player file (.afx) will be updated. All you need to do is upload the newly changed player file (.afx) and tell your browser to reload this new file by pressing the Refresh or Reload button on your browser.

If you have added a new image or audio file to your design make sure that you upload it to the appropriate directory on your web server (images or audio directory).

If you have changed and image or audio file that is used by your design then upload the changed image or audio file then hold down CTRL while you press the Refresh or Reload button on your browser.


Error Numbers Shown in the Player
Error Numbers Shown in the AnFX Player

If an AnFX player experiences a problem then an error message may appear in the browser of the form Error# n. Where n is a number*. Use the following guide to help rectify the problem.

The numbers and their meaning are shown below:

Error# -1 The .afx file containing your design could not be opened

•	Have you uploaded your design file (the file with the .afx extension) to your web server. This file is created and resaved whenever you save your design in the AnFX studio?

•	Have the permissions on the .afx file been set up to allow others to read it? This is more likely to happen if your web server is running Unix. Most FTP programs allow you to change the permissions of your file.

Error# -2 Your .afx file is corrupted

•	Did you upload your .afx file in binary mode - this is very important.

•	Somehow your file is corrupted. You should resave it again in the AnFX Studio and upload it again.

Error# -3 Your .afx file is of an older, incompatible format and needs to be converted

•	Open the .afx file the latest version of AnFX and save it again and then upload it to your web server. Opening and saving in the latest version of AnFX will convert older formats to the latest format automatically.

Error# -4 Your .afx file is of an newer, incompatible format. Newer player is required.

•	Upload the player that came with the AnFX Studio that you used to create the design.

Error# -5 Internal buffer could not be created

•	This error should never occur. If you see this go an buy yourself a lottery ticket!

*Numbers are used instead of error messages to keep the overall applet size to the absolute mininum possible.


Setting up HTML Parameters
HTML Parameters

AnFX appears within your web page via a piece of code written in HTML (hyper-text markup language). An example of this text follows:

<applet archive="anfx4main.jar,anfx4rest.jar" code="anFXApplet.class" width=400 height=200 align=middle>

<!-- AnFX (c) 1999,2000 Step Ahead Software -->

<!-- www.stepaheadsoftware.com -->

<param name="cabbase" VALUE="anfx4main.cab,anfx4rest.cab">

<param name=afxfile value="test.afx">

<parma name="gold" value="true">

<param name="fgcolor" value="FFFFFF">

<param name="bgcolor" value="FFFFFF">

</applet>

The above applet code in your HTML page will cause the progress bar and the loading text to be white on a white background - ie., invisible.

Note: if you have a personal license do not put the gold (or silver) parameter in - this will cause the player to run in evaluation mode.

NOTE: You do not have to write the above code by hand. It is placed in the clipboard whenever you choose File | Generate HTML or Edit | Production Properties. You will need to copy over any supporting files such as the player files, image and audio files if you are placing an AnFX design in a HTML page that is not in the same directory as the one where you created your .afd. See Installing the AnFX player on your web server and Publishing Your Designs on the Web for a list of files required to be copied to the directory containing your HTML file if it is not in the directory in which you created your design.

Changing the Size of the Animation

To change the size of your animation you must change it in the studio and manually change the width and height parameters listed above to the desired width and height. Changing the width and height in the studio by dragging the stage window frame or by choosing Options|Applet size only changes the designs' concept of size. This width and height parameters in the HTML file must be manually changed also so that the size in the design matches that specifed in the HTML file.

Other Parameters

You will notice that two of the lines start with "<param name=" . These lines set up special settings that can be passed into the animation. As you can see with the above example, two things are passed into the animation. They are "cabbase", which tells the animation where to find the code that it needs to run, and the other is "afxfile", which tells the animation where the data file that contains the animation details is located.

There are two other types of HTML parameters that you can add to AnFX. They must be added before the "</applet>" tag, but after the "<applet archive= ... >" tag.

•	<param name="gold" value="true"> or <param name="silver" value="true">

If you have a Silver or Gold license you can remove the "AnFX Animator" message that appears when the design is loading by adding the appropriate gold or silver parameter as above.

•	<param name="bgcolor" value="??????">

This parameter allows you to specify the background color of the progress page as it is loading the design, images and sounds. The value is specified in hexadecimal code, so white would be FFFFFF and black would be 000000. The hex code is in the format RRGGBB.

•	<param name="fgcolor" value="??????">

This parameter allows you to specify the foreground color of the progress bar and associated "loading" text as AnFX is  loading the design, images and sounds. The value is specified in hexadecimal code, so white would be FFFFFF and black would be 000000. The hex code is in the format RRGGBB.

•	<param name="???" value="???">

This parameter is used when you have a variable tag in one of your text or multi-line text actors. See variable tags for more information.

For example, if you set the tag up to be <@p=username>, then the HTML parameter would have the format <param name="username" value="???">, where the value can be whatever you want, in this case, the user name.


Common Foreground and Background Layers

Common foreground and background layers are shared layers that can contain actors. Each scene can include or exclude the common layers. This is set up in the scene properties form.

When an actor is added to a foreground or background layer it will appear in all scenes that have that layer included.

This makes it very easy to create actors that must appear on more than one scene in the same way. For example it might be desirable to place a company logo gif image in the top right hand corner of every scene. Instead of copying and pasting to each individual scene simply add the logo image to the background layer and it will appear in all scenes in the same position. If you want to adjust the position of the image simply drag it to the new position and that change in position will be reflected in all scenes.

Another application of layers is a slide show presentation. Typically each frame of a slide show presentation has previous, next, start and end buttons along the bottom. Each of these buttons would have a particular action associated with its mouse clicked event and possibly some mouse enter/exit events. Rather than recreate this set up on each individual form merely set up these slide show control buttons in the foreground layer of the production for all scenes to share. If you want to change the size of position do it once in the foreground layer and the change will be reflected in all scenes.

See also Layers


Mouse Over Actions

Mouse over actions are a key design feature when creating interactive content with good user feedback qualities. Setting up mouse over actions is quite easy once you understand the mechanism by which it works. The following will take you step by step through the process of setting up a simple mouse over design.

See also Wizard Features, Mouse Over Actions - trouble shooting

Event/Action Mechanism

It will help if we explain the mechanism first and then explain how to set it up.

A mouse over event occurs on an actor whenever the mouse enters the area taken up by the actor. The player will execute any actions that are set up for mouse over events on that particular actor. The actions themselves can be set up to effect the actor itself or some other actor that you specify.

To set up a mouse over action:

Let's assume that we have a rectangle actor and a multiline text actor. When the user moves the mouse over the rectangle we want the multiline text to change. When they move the mouse away from the rectangle we want the text to say "move mouse over rectangle". Create a rectangle actor and a multiline text actor if you haven't already got them. Right click on the multiline text actor and change the contents to "move mouse over rectangle".

1. In the combo box to the left of the "New Action..." button in the sequencer choose: "Mouse Enter". This tells AnFX that you would like to set up mouse over actions.

2. Click on the actor for which you want to trap mouse enter actions, the rectangle actor. This tells AnFX that this is the actor that you are setting up mouse enter actions for.

3. Click on "New Action..." button and choose "Text -> Set multi line contents".

4. Click the properties button and change the text to say something else like: "Hey mom, look what I can do!". Press Ok.

5. You should be back on the triggering form again. (If not right click on the little diamond shape in the sequencer window and choose Triggering.) After the line "will be performed on" press the radio button that says "A different actor". Now press change target and select on the Multi line text actor and press Ok.

This tells AnFX that we want the action to effect the multi line text actor not the rectangle (You can't set the text of a rectangle! In fact AnFX will not let you save a design if one of your actions is not set up to make sense - don't worry it will conveniently tell you which one it is so that you can rectify the problem). Press Ok and your mouse enter action is set up properly.

6. Next we want to make the text return to the original text when the mouse moves away from the rectangle. To do this we want to set up an action for a different event - the mouse exit event. Change the event combo box to the left of the "New Action..." button to "Mouse Exit".

You may have noticed that your existing diamond shaped action dissappeared. This is because AnFX avoids cluttering your window by only showing those actions for the selected event and the selected actor.

7. Select your rectangle actor again by clicking on it. Now press "New Action..." again and this time choose Reset. The triggering dialog appears.

8. At the bottom choose "A different actor" and press Change Target. Select the multi line text actor and press Ok.

We have just told AnFX that when the mouse exits the rectangle actor reset the multi line text actor. A reset will set all of an actor's attributes back to their original settings ie., the text will change back to what you had set it to originally.

Because these actions involve mouse interaction you will need to test the design in a browser to see the results as mouse actions can not be tested in the simulator. Save your design and press the Test button (the one to the right of the HTML button in the tool bar).

A browser window will open and you should see your design working in all its glory. If you want to change something and text again simply do the change save your design and press the refresh or reload button in your browser to cause it to reload the new design.

Related Info:

The wizard feature in AnFX allows you to quickly and easily set up a mouse over feature associated with many menu items. It essentially does what we have done here for a set of menu items which you can specify at the start.


Mouse Over Actions - Trouble shooting

With certain AnFX designs it may appear that mouse over is not working correctly when the mouse is moved very quickly. For example, if you have an actor configured with a color change on mouse entry and another color change on mouse exit it may appear as though some of the mouse exit events are not fully processed when you move the mouse quicjly over your actors when running in a browser.

To understand why this may happen and how to fix it you must understand how AnFX handles events. When an event occurs then all of the actions for that event are added to the actors current list of actions to be performed. Any actions already in the list are left there and continue to act until they expire.

Now back to our example: let's say we go from white to black in 1 second on mouse over and black to white in 0.5 seconds on mouse exit. If we enter and exit the object quickly with the mouse then both the white to black and black to white actions will commence. The problem is that the mouse enter action has been configured to take longer (1 second) than the mouse exit (0.5 seconds) and so it will still be active after the mouse exit action has ended ie., continuing to make the actor black even though the user has exited the actor. This will only occur if the user moves their mouse quickly around the design.

The simple way around this problem is to ensure that all of the mouse exit actions take longer than the mouse enter actions. This ensures that even though the mouse is moved quickly the actions that have the last say in the appearance of the actor are those that are configured for the mouse exit event.


About target actors

When your interactive animations become more complex you may want an event, such as a mouse click, on a certain actor to cause a different actor to perform some action. This can be achieved by setting the target actor on an action.

The target actor is shown in each row in the sequencer along with the action type. Each action in that row will act on that particular actor.

When you create an action for an actor, the target defaults to that actor if it is a valid action for that actor. If it is not a valid action (e.g. a set text on an ellipse actor) there is no target (shown by a [image] in the sequencer). You must assign all actions a target before saving your design.

To set the target to the actor you want it to act on simple select the actions icon and click 'Set target actor...'. This will bring up a list of all the possible targets for that action.

See Mouse Over Actions


Using Profiles

Timed actions progress from the current state to their end state (e.g. intensity value, color, position). By default this is a even (linear) progression. However, alternative profiles can be selected resulting in a realistic 'non-linear' progression.

In terms of movement the effect is of acceleration or decceleration. The same effect can be added to color, intensity, jitter etc.

The following profiles can be applied to timed actions:

Linear	The rate of change remains constant for the length of the action.

Exponential	The rate of change increases as towards the end of the action.

Logarithmic	The rate of change decreases towards the end of the action.

Sinusoidal	The value oscillates in a circular fashion between the start and end values. During a single cycle the value will begin and end at halfway between the start and end values.

Cosinusoidal	Same as sinusoidal excepting that, during a single cycle, the value will begin and end at the end point.

Half sine	Half the full cycle of a sinusoidal profile.

Half cosine	Half the full cycle of a cosinusoidal profile.

Square wave n%	The value jumps fromt the start value to the end value with no transition. There are three square waves to choose from: 25, 50 and 75%. This value is the percentage of time the wave is at the end value.

Path Profiles and Circular Motion

Paths actions allow configuration of different profiles for the X and Y dimensions. This means the route that the actor follows is not necessarily in a direct line between the waypoints. For example, configuring X and Y to sinusoidal and cosinusoidal (in either order) will result in circular movement.


Inserting Variable Tags
Variable Tags

AnFX allows you to use "variable tags" in the contents of text actors and multi-line text actors. Variable tags are symbol that are replaced with the appropriate value when the animation runs in the applet player.

There are two types of variable tags available at the moment. They are:

<@p=paramname>

Retrieves the value of a HTML parameter and inserts in to the text.

<@s>

Inserts the name of the current scene..

Example 1

•	Set up a parameter in the applet invocation code e.g

<param name="param1" value="Fred">

•	Create a text actor and set the contents to:

<@p=param1>

•	Click test applet [image] to run the animation in the browser

•	The contents of the text actor will be replaced by the word 'Fred'

For more information see:

•	Setting up HTML Parameters

Example 2

•	Create a text actor and set the contents to:

This scene is called <@s>

•	Click test applet [image] to run the animation in the browser

•	The contents of the text will become: 'This scene is called Scene 1'.


List of Actor Types

This guide lists the actors types, their properties and the actions that apply. Click on the actor type you are interested in:

Text Actors

  Text actor

  Multi-Line Text Actor

Preset Shape Actors

  Rectangle Actor

  Ellipse Actor

  Horizontal Line (see Rectangle Actor)

  Vertical Line (see Rectangle Actor)

User Created Shape Actors

Filled Shape Actor

Outline Shape Actor

Image Actors

  Image Actor

  Image Cycler

Audio Actors

  Audio Actor


 Text Actor

Text actors are used to display single lines of text.

Even on the internet text is by far the most widely used method of presenting information. In AnFX you can create exciting visual effects with text. You can select the typeface, style and colour of the font. The size of the font Text Actors

Properties

Contents

Font

Position

Size

Color

Intensity

Shadow

Jitter

Actions

Path

Color

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset


 Multi-Line Text Actor

Multi-Line text actors are used to display multiple lines of text.

Properties

Contents

Font

Justification

Position

Size

Color

Intensity

Shadow

Jitter

Actions

Path

Color

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset


 Rectangle Actor

Rectangle actors are a solid or outlined rectangle shape with optionally rounded corners.

Properties

Rounded Corners

Position

Size

Color

Intensity

Shadow

Jitter

Actions

Path

Color

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset


 Ellipse Actor

Ellipse actors are use for solid oval or circle shapes. They can be solid filled or outlined. They can also be used to paint curves (sections of an ellipse) by specifying the start angle and the sweep angle (the size of the arc).

Properties

Position

Size

Color

Intensity

Shadow

Jitter

Actions

Path

Color

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset

In addition to these there are actions that change the start and sweep angle of an ellipse actor.


Shape Actors

Shape actors are actors whose shape is determined by a set of nodes created and positioned by the user when in "node edit" mode. They can be filled (the area inside is painted with a specified color) or stroked (a line is drawn from one point to the next).

Creating a Shape

To create a shape click on on of the buttons in the tool bar that look like those shown above. You will then be asked what layer you want the shape to reside in. Choose a layer and press ok. The new shape will appear in the stage window something like this:

Turning on Node Edit mode

To edit or create nodes in a shape you must first set the studio to node editing mode:

•	Right click on any shape actor in the stage window.

•	If the option "Node Edit Mode" does not have a tick next to it then choose this option to turn on Node Edit mode.

Hint: Turn node edit mode off when not editing nodes to avoid accidently adjusting nodes.

Editing or creating nodes in a Shape

The nodes of a shape are always editing in the start point icon. This means that if the shape has a waypoint you must go back and select the start point to perform any node editing. Changes that you make in the start point icon will be update the appearance of the shape in its current location.

To edit a Shape first set the time in the sequencer back to time 0 so that the actor is back to its start position (this is not necessary but makes for more intuitive editing). Left click on the actor and its nodes will now be displayed. The start node is shown as an 'S', the end node as an 'E' and intermediate nodes are represented by small squares.

•	Moving a node:

Click and drag the node to the desired position.

•	Adding a new node between two existing nodes:

Right click on the line joining the two nodes and choose "Insert new node".

OR

Press the left mouse button down on a line joining two nodes. A new node will be created. Drag the newly created node to where you desire.

Note: You can not add nodes to the line joining the start and end nodes - to do this you must right click and choose Add node to end.

•	Adding a node after the end node.

Right click within the actor at the desired position of the new node and select "Add node to end". A new node will be created at the current mouse position and it will become the end node.

•	Deleting a node

Right click on the node and select "Delete node". You must always have at least 2 nodes - you will not be able to delete any nodes when only two are left.

Properties

Position

Size

Color

Intensity

Note: Jitter and shadow are as yet not implemented for User Created Shape Actors.

Actions

Path

Color

Intensity

Scene Link

URL Link

Reset


 Image Actor

Image actors display GIF or JPEG images either scaled to fit within their bounding rectangle or shown at their natural size. Images can also be faded in and out in a number of ways by applying an Intensity Action that changes their intensity level over time. See Images: Fading in and out for more information

The AnFX Studio shows images as either full intensity or invisible - the player will show the image as specified in the fade type drop down box in Image | Properties. If the image can not be found then the actor will display a gray rectangle with the name of the image inside it. When the AnFX applet player is run the image in the file will be loaded and displayed.

Images should be stored in a directory called images. When you save your design (.afx file) if there is no images directory under where you save to then AnFX will create one.

Using an Image in your Design

Copy any images that you want to use in your designs into the images directory. Create a similar images directory on your webserver and copy the images to that directory also.

When you want to place an image in your design:

1. Create an image actor. Choose Actor| New Image. A gray rectangle with the words "No Filename" will appear. Images appear as gray rectangles in the design studio until the image is located on the local disk. They display as their proper image when running in a browser.

2. Specify the jpg or gif filename to use. RIght click on it and choose details. Press the "Change" button. Double click on the images directory if you are not already in there and then double click on the JPG or GIF image that you want to use.

Tip Smart use of GIF and JPEG files means making sure they are not too large as users visiting your site using slow modems may have to wait a long time for images to arrive. This applies to AnFX design as well and plain old HTML web page design. Try to keep you images under 5 or 10 kb.

Properties

Image File Name

Scaled

Effects of Intensity Actions on this image

Check this if you want to be able to fade this image in and out. If this is not checked then the image will only appear at either 100% or 0% (invisible). Do not turn this on for images that will only ever be shown at 0 or full intensity as this will unnecessarily delay the loading phase.

Position

Size

Intensity

Jitter

Actions

Set File Name

Path

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset


 Image Cycler

An image cycler operates similar to an animated GIF. It uses a numbered series of image files (GIF or JPEG)  eg., electricity0.jpg, electricity1.jpg, electricity2.jpg, etc. (Note that the first image is always 0 not 1). You must create these files or obtain them from another source and store them in the directory that you store images. You then need to tell AnFX the prefix (eg., electricty) and the number of frames (eg., 4).

For example:

Prefix: 	electricity

Extension:	jpg

Number of frames:	4

When the player runs an animation with an image cycler with the above specifications it will expect to find 4 electricity image files with numbers 0, 1, 2, 4 on the end of the prefix. ie., electricity0.jpg, electricity1.jpg, electricity2.jpg, electricity3.jpg

Properties

Image Prefix

Image Extension

Number of Frames

Frame Length

Scaled

Position

Size

Intensity  (image cyclers are either fully visible 1-99% intensity or invisible 0% intensity)

Jitter

Actions

Set File Name

Path

Intensity

Shadow

Jitter

Scene Link

URL Link

Reset


 Audio Actor

Audio Actors are non-visual actors i.e. they do not appear in the final animation. They can be placed in a scene and invoked using the play, stop and loop actions. As they are non-visual they cannot respond to mouse events but mouse events on other actors can activate an audio actor.

At this stage the only sound file format supported by Java that can be guaranteed to work on all Java browsers is the Sun™ Audio (.au) file format.

Note: most audio packages can convert .wav files to .au files. In order for the .au files to work in AnFX, they must be in the following format:

8-bit u-law mono, 8000 Hz

Also please note that if your audio file is too loud, it will not play. If you experience this problem, try reducing the volume of your sound file.

For more information on how to convert your sound file, click here.

Properties

File Name

Start Playing

Actions

Set File Name

Play

Stop

Loop


Exporting your design
Your design files are always saved in a AnFX design file (.afd). The 'd' in .afd stands for 'design'.

When it comes time to deploy your design to a web site you must choose to export your design to Macromedia Flash format (.swf) or AnFX player format (.afx).

.afx format

When you export to .afx format your AnFX animations are played on the web via the world's most powerful yet compact Java applet. Most AnFX users can not believe that we crammed so much power into such a tiny 30KB applet!

Many users have stopped using Macromedia Flash in preference to AnFX because they say it is easier to develop interactive content in AnFX and it does not have all the problems associated with "plug ins" technology. Yet one of the most compelling reasons for using AnFX is that you can build sophisticated, interactive content that is often about 10 times smaller in size than comparable Flash designs which means you can pack a whole lot more punch and have it start while a similar Flash design would still be showing a "loading..." message.


Types of Wizards
Wizard Features

AnFX contains various wizard features to make the setting up of certain types of designs very quick and easy:

The wizard often creates multiple actors to create the end result. The actors are grouped together as a single actor for easier management within the user interface. A gray border is displayed around the group's perimeter. To adjust its properties you can right click within the gray border and choose "Properties...". If desired you can ungroup the actor to allow for more fine control over the placement and appearance of its individual components but after doing this you can no longer use the wizard on the ungrouped actors - think twice before ungrouping!

See Groups for information relating to the manipulation groups.

Currently there are three types of wizards:

Menu Wizard

This wizard sets up interactive menus with mouse over actions that change text in a multiline text actor.

See Menu Wizard.

Banner Wizard

The banner wizard sets up interesting text effects including waving text and scrolling text.

See Banner Wizard

Button Wizard

This wizard is used to set up a button that will change its appearance when the mouse goes over it. You can change attributes such as color, boldness etc., You can also set up a mouse clicked action so that when this button is clicked it links to another scene within the same production or to another page or website.

See Button Wizard


Menu Wizard

•	Open a blank page and select Wizard | Menu...

This will display the Menu Wizard window:

•	Select a Menu Layout: horizontal or vertical.

•	Modify the Menu Appearance. See Menu item appearance

•	Use the Add, Remove, Edit and Clear buttons to modify items in the list (note: Clear will remove all items). More Details.

•	Use Move up, Move down to change the order of the menu items.

•	Click Text Properties to setup the font and color of the menu items.

•	When finished click OK to generate the menu. If you made a mistake or want to try a different setting, simply right click on the menu group and choose "Properties...".


Banner Wizard

The banner wizard creates an eye-catching text animation using the caption you enter.

•	Using a blank scene, select Wizard|Text Banner.

•	Choose a banner style:

Ticker Tape	A simple banner that scrolls from right to left across the screen.

Wave	Each character fades in and oscillates in a wave like fashion.

Flying Text	A more dramatic effect that where each character zooms in from off screen and flashes to the highlight color.

Compress to left	Characters of the words zoom in from the right and compress together to form the words at the left.

Compress to right	Characters of the words zoom in from the left and compress together to form the words at the right.

Compress to centre	Characters of the words zoom in from the left and right and compress together to form the words in the centre.

Exploding	Characters of the words explode after a set time shooting in all different before fading away.

Imploding	Characters of the words are initially randomly placed and invisible. At the specified time they fade in and converge together to form the words of the text.

Typewriter	Characters of the words appear from left to right as though they were being typed.

•	Select Text Properties to configure the font and color(s) of the text.

•	Click OK to generate the banner.

•	To edit the text banner again right click within the gray border shown around the banner and choose "Properties..."


Button Wizard

•	Chose Wizard|Button Wizard

•	On the form that appears you can change various aspects of the button. You can adjust normal and mouse over background colors, border thickness and color, size add bullets.

•	Click OK to apply the wizard.

When viewing the design in a browser the text will change to the highlight color when the mouse is over it and back to the original color when the mouse moves away. You may also set the text to become bold when it is highlighted.


Image: Fading In and Out
Images: Fading in and out

Images can be displayed in a wide range of intensities - from 0% - 100% but only if the "Effect of intensity actions on this image" combo box is set up.  If the settting is set to None the image will only ever be displayed at either 100% (full intensity) or 0% intensity (invisible). There are a variety of fading styles to choose from.

You can set an image's initial intensity by right clicking on it and choosing intensity. You can also set up an intensity action  to change the intensity over time or in response to a mouse event to make the image appear to fade in or fade out. See Actions.

For images that are to be faded make sure that in the "Effect of intensity actions on this image" in the Image Details dialog box is set up to something other than "none". If you do not fade an image make sure that you set it to none to save memory.

Image Fading Styles

The image fading style is specified in the Image Properties dialog box. It specifies how the image is to be faded.

Fade to background color

The faded image is blended with the production background color (NOT the scene's background color!)  to a level determined by the intensity. At 100% there is no background color present - the image is at full intensity. At 1% the image appears as a the color of the background. At 50% the image appears as a 50-50 blend of the image and the background color. At 75% the image is a blend of 75% image and 25% background color and so on. Note: Faded images using this style are opaque - any text or other actors behind the image will not appear (unless through the transparent areas of a GIF with transparency) regardless of the intensity (except, of course, if the intensity is 0).

Pixelation

The image fades by using a progresssively larger number of transparent squares.

Dithered Transparency

Transparent pixels are distributed about the image in increasing number as the image fades. What ever is behind the image

Circular Fade

The image dissappears to its center.

There is a special intensity value: at 0 intensity nothing is painted for the image at all. It is in effect invisible.


Design Tips

Use of Gif and JPEG Images

The reason for the AnFX applet's speed and effectiveness is it's compactness which allows it to download fast. If you decide to add a large Gif or JPEG image cycler actor, with many frames, to your AnFX design then the benefits of fast download may be lost when internet bandwidth is limited. However, a small Gif or JPEG animation used in combination with some well positioned, eye catching textual effects, gives impressive images while maintaining fast download times as compared with a completely bitmap-based animation such as animated GIFs.

Multiple AnFX animations on a single Web Site

Where AnFX is used many times on a single web site it will only be downloaded once. When another page is viewed which also uses AnFX the applet's .class files have already been downloaded so all that is needed to be downloaded is the new data file. So a second AnFX on the same site is faster still.


Creating Buttons

Text, image, rectangle actors etc., are the essential types of actors used to create impressive, quick downloading animations. It is also possible to combine these in smart ways to implement more traditional concepts such as buttons, menus etc., This avoids the need to have a separate applet on your website just to handle the buttons or menus - AnFX can do it all!

Many people are using AnFX for their entire website because it is easy to combine impressive, informative visual effects with navigational components like buttons, links etc.,

Button Example

•	Create a rectangle actor. Move and size the actor to where

•	Create a text actor containing the button caption and place it over the rectangle actor.

•	Select the rectangle actor (tip: double click on the current actor in the sequencer to select the actor from a list)

•	In the sequencer: select the mouse enter event.

•	Add a color action - choose a bright color.

•	Click on the 'Set target actor' button and select the text actor from the list.

•	Select the mouse exit event.

•	Add a reset action and set the target to the text actor (as above).

•	Select the mouse down event.

•	Add a shadow action - set to around 10%.

•	Select the mouse up event.

•	Add a shadow action - set to 0%.

•	Select the mouse clicked event and add an action such as a scene link,  play audio etc.

•	Now run your animation in a browser to see the result.

Note When creating small actors like text over a larger rectangle to make a button type actor you should not set up any actions triggered by the mouse entering the text actor, only the rectangle actor - otherwise the rectangle actor won't get see the mouse event. Set the actions up in the rectangle. Some of the rectangles' actions can, of course, have the text actor as their target as in the example above.


Converting Audio
 Converting Audio Files for use with AnFX

An easy to use tool for converting your sound file is available at www.goldwave.com. Instructions on how to use this tool are as follows:

1. Download GoldWave and install it. (Note that GoldWave is shareware, and as such has its own terms of use).

2. Start GoldWave, and open your wave file (or many other sound formats)

3. Select "Save As" from the File menu.

4. Choose "Sun (au)" from the file format box, and make sure "Java/Web" is selected in the type box below it.

5. Choose a filename and location, and press Save.

And you're done. The .au sound file can now be used in AnFX. Don't forget to upload it when you're putting everything on the web.


Making a design start to play quicker
Hints for improving start up time

If you check "Quick Start" in the production properties form then the AnFX player will start to play scene 1 as soon as all resources required by that scene have been loaded and processed. Until that time the progress bars will be shown. AnFX will not wait for all resources to be loaded before playing - only those required for scene 1. This allows it to start animating sooner.

You can make scene 1 start quicker by avoiding including too many large images on that scene as these will take longer to load that small images. Your choice of image fading style will also affect the time it takes to start scene 1. You can use scene 1 as a sort of introductory scene. While it is displayed resources for scene 2, scene 3 etc., will be downloading in the background.

If a later scene is shown prior to its resources being loaded then those resources will not appear on that scene until loaded. This should not be a problem if sufficient time is spent on previous scenes.


Adjusting multiple actions at once

Sometimes you need to adjust the time at which a set of actions for a particular actor complete.

You can select multiple actions by holding CTRL while clicking on the actions. Click and drag one of the selected actions and all the actions will move together.

To revert back to dealing with one action at a time click on empty space in the sequencer window.


Select an actor or waypoint that is behind another one?
You can select an actor or waypoint that is behind another object by holding down the ALT key and pressing the left mouse button over the actor or waypoint you want selected. Each time you click the mouse button and object under the mouse and further down the order of objects is selected. Look at the summary in the sequencer to window to know when the object you want is selected. When you click on the bottom most object the selection returns to the top object again.


Select multiple actors?
You select multiple actors by clicking on empty space in the stage window and dragging a rectangle around actors. Those actors completely enclosed by the rectangle will become selected.


Manage complex designs?
You can make working with complex designs much easier by selecting actors that are naturally associated with each other and then turning them into an actor group. You can then use right click on any object in the stage window and choose "Select/Show/Hide Actors" to hide various groups that aren't needed. You can then make them visible when you need to edit them. This declutters the stage making it easy to manage quite complex designs.


Make a suggestion, ask a question or provide feedback?
Suggestions, Questions, Feedback

If you need to know how to do something that is not listed here in this "How do I..." section or you have a question or some feedback then send us an email:


Technical Support
AnFX Technical Support

AnFX is supported by friendly technical support staff via email, live technical support or the web and a number of other support methods for both evaluation users and registered users.

Please visit our support page for more details:

http://stepaheadsoftware.com/anfxs.htm


This box displays the type of action in each row as well the target actor for the action(s) in that row.

When you create an action, the icon will be placed in a row with other actions of the same type and same target. If no such row exists then one will be created. When the last action in a row is deleted that row will be removed.

Note

When an action's target actor is changed it may be moved to a different row.


This area displays the position of the actions in time. Actions can be added at a particular time by right clicking in this area at that point.

•	Instant actions are represented by diamond icons [image] which can be dragged to adjust the position in time.

•	Timed actions are represented by bars [image]  which can be moved by clicking the center and dragging, or sized by dragging the arrows on the end.

•	Path actions display the number of the corresponding waypoint in the bar.

•	Color actions display the color transition.

•	All other timed actions display the end value.


Current Actor

This box shows a thumbnail image of the current actor. This is the actor whose actions are currently shown in the sequencer.

•	Double click on this box to change the current actor.


This lists the configurable events in AnFX.

•	Select an item from the list to display the actions for that event.


Action Management Buttons

From left to right they are:

New Action

Add a new action to the current actor. This will add an action to the end of the row of actions - to add an action at a particular time, right click in the sequencer at that point.

Edit Action

Edit the properties of the current action. If no actions are selected click in the centre of the action to you to edit and then press the Edit Action button.

Delete Action

Deletes the currently selected action - the current selected action is highlighted by blue arrows.

Set Target Actor

Selects the "target actor" of the current actor. The target is the actor that the action will be applied to when the current event is triggered on the current actor. See Target Actors


Simulator Controls

These buttons control the operation of the simulator.

From left to right they are:

Rewind back to start

Rewind 1 second

Play

Stop

Forward 1 second

Forward to end


Time Scale
The time scale is used to arrange the start (and end) time of actions and to display the current time during playback. The current time is represented by a small marker (as shown below).

•	To set the current time, click in the time scale at the desired point. This will display the state of the animation at that time.


The exact XY coordinates of the actors original position.


The exacts size (width height) of the actors original size.


The original color of this actor. Modifying this property invokes the Windows color selection dialog.


Intensity
Intensity ranges from 0% (fully transparent) to 100% (fully opaque). Default is 100%.


Shadow
When turned on, a grey shadow which falls down and right is painted behind the actor. The value is specified as percentage of the actors height. Default 0% (no shadow).


Jitter
Jitter causes the actors a move randomly around its base area. The jitter value is specified as a percentage of the actors size. Default: 0% (no jitter).


The caption of the text actor, entered as text and/or variable tags.


Font
The type-face of the actor. Note that due to limitations with the Java™ language, only the following fonts may be used:

Arial, Times New Roman, Courier New, System

For multiline text actors, a combo box will be enabled allowing you to specify the point size of the text.


Justification
The justification of the text (left, right, centered).

•	Modify this property with the justification buttons in the AnFX toolbar


Two values specified as percentanges of the width and height of the rectangle (0-50%)


The audio file containing the sound played by the audio actor.


The name of the file containing the image displayed by the actor.


The prefix of the series of image files used by the cycler.

This should be:

images/xxx

where xxx is the prefix of your image name without the numbers.


The extension (.gif or .jpg) of the files used by the cycler.


Scaled
When scaling is on the image is scaled to fit the size of the actor. Otherwise the image is displayed in its original size.


The number of frames to play through.

•	There must be as many images availiable as the number of frames you specify.


The duration of time (in milliseconds) to display each frame.


Turning this option on will cause the audio actor to start playing the sound as soon as the scene begins.


Paths actions act on an actor on it's journey towards a waypoint. The path action transforms the actor from  its current size and position to the new size and position at the waypoint.

Path actions can have seperate X and Y profiles. See profiles for details.


Changes the actor from its current intensity to the specified intensity using the configured profile.


Phases the actor from its current color to the specified color using the configured profile.


Changes the actor shadow from its current depth to the specified depth using the configured profile.


Changes the actor jitter from its current level  to the specified level using the configured profile.


Resizes the multi-line text to the specified size using the configured profile.


Reset
Reset can be applied to any actor or the entire scene. It restores the actor or scene to its original state, i.e. the state at time zero.


Trails
Trails can only be applied to the scene. It causes all actors to leave behind trails as they move across the screen giving a motion blur effect.

This can be used to make gradient fills and other amazing effects. Try moving and sizing an ellipse while changing its color and see what happens!


Scene Link
Scene Links

•	Goto "N" Scene

Changes to the specified scene. Always goes to that scene event if the scenes change in order.

•	Goto Next Scene

Changes to the next scene, i.e. the scene following the current one in the Scene Manager, hence, the target scene may change if the ordering of scenes is changed

•	Goto Previous Scene

Change to the previous scene. Same rules apply as Goto Next Scene.

•	Go Back

Changes to the scene last viewed before the current one. This will depend on the path taken to get to the current scene

•	Rewind Scene

Rewinds the current scene to the specified time.


URL Link
This will take the user to a new URL, in the current window.

•	You can optionally specify a target frame.

•	The URL does not have to be a HTML resource. You can use e-mail addresses here as well, by using the format :

mailto:<your address here>


Changes image used in the actor to the image with the specified name.


Changes the prefix of the image cycler files.


Jumps to the frame with the specified index.


Jumps to the next frame.


Jumps back to the previous frame.


Stops/starts image cycler animation


Sets the contents of the text actor or multi-line text actor.


Change the font properties: bold, italic, underline and strikethrough.


Change the source of the audio clip (i.e. the .au file name)


Plays the audio clip once.


Stops the audio clip playback.


Play the audio clip, and loops repeatedly.


Menu Items
Menu Item

Caption

The caption that will appear in the menu. The caption will be used as a scene name if the 'new scene' option is selected (see below).

Description

Text that appears at the bottom of the scene ('Bulleted' menu style only). Also used by the 'new scene' option.

Link

You may set up a link action for when the item is clicked on:

•	Existing scene

Links to a scene that already exists in the production or performs an action such as Goto next scene. See: Scene Link.

•	New scene

Creates a scene on the spot featuring the caption and description text. The item will link to this scene.

•	Webpage

Jumps to the webpage at the specified URL. See: URL Link.


MenuOptions
Menu Item Appearance

Options are dependant on the selected menu style:

Height

The height in pixels of each menu item.

Fill menu item background

Check if you want the background of menu items filled.

Specify the normal color to display and the color to display when the mouse

is over the menu item

Bulleted

Check if you want a bullet displayed for each item

Bullet Color	The color of the menu bullets

Placement	The side of the menu text (left or right) on which the bullets are located.

Border

Check if you want a border drawn around each menu item

Use the drop down list box to specify the border thickness.

Display description in a multiline text actor

Check if you want the menu item descriptions to be displayed in

a multi line text actor when the mouse moves over them. The menu wizard

will create a new multiline text actor if it has not already created one.

You can edit the properties of this multi line text actor after you have

finished editing in the menu wizard.


Simulator Limitations

The playback feature of the AnFX Production Studio makes it easy to see your designs without having to switch to your browser.

While this feature is very handy there are some things that the simulator can't perform. To test these you must run your design in a browser. The production studio currently has the following limitations:

•	Events such as 'Mouse Pressed' are not simulated during playback.. If you want to test the actions of a certain event, you can select that event from the dropdown list in the sequencer, and press play from there. The simulator will run as if the that event (eg., mouse pressed) had just occured on the current actor.

•	The simulator will not display GIF images with their true transparency. When running in the AnFX player however transparency will be displayed correctly.

•	The simulator WILL display GIF and JPG images but always at full intensity (regardless of the actual intensity) except for intensity 0 when they will be invisible. The AnFX player will display images at their correct intensity.

•	The simulator cannot playback audio (.au) files.

None of these limitations apply to running the animation within a web browser. Events will trigger normally, images will be displayed, and sounds will play (assuming the computer is capable of playing sound) when running the animation in your browser.

•	To test your design in a browser see Testing Your Designs Locally.


Links
AnFX

Copyright © 1999 Step Ahead Software

For more information on AnFX see:

•	The AnFX Home Page

For information on purchasing AnFX:

•	Purchasing

To see the latest news on AnFX releases:

•	News and Events

For information on other Step Ahead products see:

•	Step Ahead Software Home Page


  Text

  Multi-Line Text

  Rectangle

  Ellipse

  Horizontal Line

  Vertical Line

  Image

  Image Cycler

  Audio


ActionProperties
Configuring Actions

•	Right-click on the icon of the action in the sequencer and select Edit.

•	This will display the action configuration form where you can modify the options below:

Start/End Time

Specify start and end times for the action or simply drag the action icon after closing this window.

End Value

Specify the end value for the action. For most actions this will be a single integer value; for Path actions it is the end position and size; for Color actions select an end color from the popup window.

Advanced Options

•	Click on Advanced to configure the options below:

Profile

Select a profile for the action from the drop-down list. To configure Path profiles, click the X and Y buttons to display the profile for that dimension.

See Profiles for more detail.

•	You can choose whether you want the action to repeat or not:

Non Repeating

Selecting this option will cause the action to progress once through it's profile over the entire duration of the action.

Repeating

Repeating actions progress through the profile in the time specified in the Cycle length field and repeat continuously until the end of the action.